<template>
  <el-row>
    <el-col :span="3">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
    </el-col>
    <el-col :span="30">
      <el-button text @click="dialogVisible = true">
        click to open the Dialog
      </el-button>

      <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
      >
        <span>This is a message</span>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
        </template>
      </el-dialog>

    </el-col>
  </el-row>


</template>

<script lang="ts" setup>
import BasicContainer from '@/components/basic-container/main.vue';
import { getTree } from '@/api/icc/materialDirectory';
import website from '@/config/website';
import { getList } from '@/api/icc/material'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<style>
.demo-image {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 或者使用 center 来居中对齐 */
}

.block {
  display: flex;
  flex-direction: column;
  align-items: center; /* 使内容居中对齐 */
  margin: 10px; /* 添加一些间距 */
  width: calc(19% - 10px); /* 20% 是每行的五分之一，10px 是为了留出空隙 */
}

.el-pagination {
  margin-left: 39%;
  margin-top: auto; /* 将分页组件推到底部 */
  text-align: center;
}

.expand-icon {
  opacity: 0;
  transition: opacity 0.3s ease; /* 添加平滑的过渡效果 */
  font-size: 10px;
  color: #3F9EFF; /* 文字颜色 */
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer; /* 将鼠标指针变为手型，表示这是一个可点击的元素 */
  /* 根据需要添加其他样式 */
}

.image-container:hover .expand-icon {
  opacity: 1;
}

.image-container {
  position: relative;
  width: 180px;
  height: 180px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
